<!-- 门店申请页 -->
<template>
  <view v-if="shenheStatus == 0" class="applyShop">
    <scroll-view class="scroll" scroll-y>
      <swiper class="swiper" :autoplay="true" v-if="configData">
        <swiper-item v-for="(item, index) in configData.md_banner" :key="index">
          <image :src="item" class="head"></image>
        </swiper-item>
      </swiper>

      <view class="formBox">
        <view class="choosePic" style="border-bottom: 1px solid #f1f1f1">
          <view class="title">
            <text>{{ $t("mdAdmin.logo") }}</text>
            <text>（{{ $t("mdAdmin.necessary") }}）</text>
          </view>
          <view class="choose" v-if="form.logo == ''" @click="addPic('logo')">
            <text class="iconfont icon-camera"></text>
            <text>{{ $t("mdAdmin.upload") }}</text>
          </view>
          <view class="choose" v-else>
            <image :src="form.logo"></image>
            <text
              class="close iconfont icon-close"
              @click.stop="form.logo = ''"
            ></text>
          </view>
        </view>
        <view class="formItem">
          <text class="title">{{ $t("clerk.shopName") }}</text>
          <input
            type="text"
            placeholder-class="input-hold"
            :placeholder="$t('mdAdmin.name')"
            v-model="form.name"
          />
        </view>
        <view class="formItem">
          <text class="title">{{ $t("clerk.phone") }}</text>
          <input
            type="text"
            placeholder-class="input-hold"
            :placeholder="$t('mdAdmin.phone')"
            v-model="form.mobile"
            maxlength="11"
          />
        </view>
        <view class="formItem">
          <text class="title">{{ $t("admin.concactPerson") }}</text>
          <input
            type="text"
            placeholder-class="input-hold"
            :placeholder="$t('mdAdmin.contact')"
            v-model="form.contact"
          />
        </view>
        <view class="formItem" @click="showAd = true">
          <text class="title">{{ $t("my.region") }}</text>
          <view class="area-info">
            <selectArea
              ref="selectArea"
              v-model="showAd"
              @ok="areaPicker"
            ></selectArea>
          </view>
        </view>
        <view class="formItem address-form">
          <text class="title">{{ $t("my.detail") }}</text>
          <view class="address-info" @click="gotoLocal">
            <view
              class="info-text"
              :class="form.address || address ? 'color-black' : ''"
            >
              <input
                type="text"
                disabled
                v-model="form.address"
                :placeholder="$t('my.fillDetail')"
              />
            </view>
            <view class="local-box">
              <i class="iconfont icon-a-map"></i>
              <text>{{ $t("my.positioning") }}</text>
            </view>
          </view>
        </view>
        <view class="formItem">
          <text class="title">{{ $t("shop.userName") }}</text>
          <input
            type="text"
            placeholder-class="input-hold"
            :placeholder="$t('shop.noUserName')"
            v-model="form.user_name"
          />
        </view>
        <view class="formItem">
          <text class="title">{{ $t("shop.password") }}</text>
          <input
            type="password"
            placeholder-class="input-hold"
            :placeholder="$t('shop.noPassword')"
            v-model="form.password"
          />
        </view>
      </view>
    </scroll-view>
    <view class="foot">
      <text class="btn" @click="submit">{{ $t("mdAdmin.apply") }}</text>
      <view class="tip">
        <radio
          :checked="read"
          color="#f0250e"
          @click="read = !read"
          style="transform: scale(0.7)"
        />
        <text>{{ $t("mdAdmin.read") }}</text>
        <text @click="gotoAgreement" style="color: #f0250e"
          >《{{ $t("mdAdmin.agreement") }}》</text
        >
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import selectArea from "@/components/tools/tool-area.vue";

export default {
  components: { Shenhe, selectArea },
  data() {
    return {
      classify: [],
      form: {
        name: "",
        mobile: "",
        logo: "",
        province: 0,
        city: 0,
        district: 0,
        address: "",
        contact: "",
        user_name: "",
        password: "",
        latitude: "",
        longitude: ""
      },
      // 是否阅读协议
      read: true,
      areaInfo: "",
      area: "",
      address: "",
      configData: null,
      showAd: false
    };
  },
  onLoad() {
    this.getTopBanner();
  },
  methods: {
    getTopBanner() {
      this.$allrequest.mdAdmin.mdApplyConfig({}, true).then((res) => {
        if (!res.code) {
          this.configData = res.data;
        }
      });
    },
    areaPicker({ province_id, city_id, district_id, position }) {
      this.form.province = province_id;
      this.form.city = city_id;
      this.form.district = district_id;
      this.areaInfo = position;
    },
    // 上传图片
    addPic(e) {
      this.$utils.uploadImage(1, (res) => {
        this.form[e] = res;
      });
    },
    async gotoLocal() {
      const apiRes = await this.$store.dispatch("getLocation");
      if (apiRes.longitude) {
        uni.chooseLocation({
          success: (res) => {
            this.address = res.address;
            this.form.address = res.address;
            this.form.latitude = String(res.latitude);
            this.form.longitude = String(res.longitude);
          }
        });
      }
    },
    submit() {
      if (!this.read) {
        uni.showToast({
          title: this.$t("mdAdmin.noRead"),
          icon: "none"
        });
        return;
      }
      if (!this.form.logo) {
        uni.showToast({
          title: this.$t("mdAdmin.noLogo"),
          icon: "none"
        });
        return;
      }
      if (!this.form.name) {
        uni.showToast({
          title: this.$t("mdAdmin.noName"),
          icon: "none"
        });
        return;
      }
      if (!this.form.mobile) {
        uni.showToast({
          title: this.$t("admin.noPhone"),
          icon: "none"
        });
        return;
      } else {
        if (!this.$utils.isMobile(this.form.mobile)) {
          uni.showToast({
            title: this.$t("admin.errPhone"),
            icon: "none"
          });
          return;
        }
      }
      if (!this.form.contact) {
        uni.showToast({
          title: this.$t("mdAdmin.contact"),
          icon: "none"
        });
        return;
      }
      if (!this.form.province) {
        uni.showToast({
          title: this.$t("my.chooseRegion"),
          icon: "none"
        });
        return;
      }
      if (!this.form.address) {
        uni.showToast({
          title: this.$t("shop.detailAddress"),
          icon: "none"
        });
        return;
      }
      if (!this.form.user_name) {
        uni.showToast({
          title: this.$t("shop.noUserName"),
          icon: "none"
        });
        return;
      }
      if (!this.form.password) {
        uni.showToast({
          title: this.$t("shop.noPassword"),
          icon: "none"
        });
        return;
      }

      uni.showLoading({
        title: "请稍等",
        mask: true
      });

      this.$allrequest.mdAdmin
        .applyMd(this.form)
        .then((res) => {
          uni.hideLoading();

          if (!res.code) {
            uni.showToast({
              title: this.$t("mdAdmin.submitSuc")
            });
            setTimeout(() => {
              this.$utils.toUrl(
                `/md_admin/apply-md/apply-result`,
                "redirectTo"
              );
            }, 1500);
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none"
            });
          }
        })
        .catch((err) => {
          uni.hideLoading();

          uni.showToast({
            title: err.msg,
            icon: "none"
          });
        });
    },
    gotoAgreement() {
      uni.setStorageSync("richText", this.configData.md_agreement);
      this.$utils.toUrl("/md_admin/apply-md/richText");
    }
  }
};
</script>

<style lang="scss" scoped>
.applyShop {
  height: 100vh;
  background-color: #f2f2f2;
  font-family: PingFang SC;
  color: #262626;
  display: flex;
  flex-direction: column;

  .swiper {
    width: 100%;
    height: 360rpx;
    display: block;
  }
  .head {
    width: 100%;
    height: 360rpx;
    display: block;
  }

  .scroll {
    flex: 1;
    overflow-y: auto;
  }

  .formBox {
    padding-left: 30rpx;
    background-color: #fff;
    .formItem {
      padding: 30rpx 0;
      display: flex;
      align-items: center;
      padding-right: 30rpx;
      justify-content: space-between;
      border-bottom: 1px solid #f1f1f1;
      .title {
        width: 160rpx;
        font-size: 30rpx;
        text-align: left;
      }
      input {
        flex: 1;
        text-align: left;
      }
      .input-hold {
        color: #8c8c8c;
      }
      .chooseClass {
        display: flex;
        align-items: center;
        font-size: 28rpx;
        color: #8c8c8c;
        .iconfont {
          font-size: 24rpx;
        }
      }
      .area-info {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #8c8c8c;
        }
        .color-black {
          color: rgb(38, 38, 38);

          input {
            color: rgb(38, 38, 38);
          }
        }
      }
      .address-info {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .info-text {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #8c8c8c;
        }
        .color-black {
          color: rgb(38, 38, 38);
        }
        .local-box {
          display: flex;
          justify-content: center;
          align-items: center;
          .iconfont {
            color: #8c8c8c;
          }
          text {
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #8c8c8c;
          }
        }
      }
    }
    .address-form {
      display: flex;
      align-items: flex-start;
      .info-text {
        width: 80%;
      }
    }
    .choosePic {
      padding: 30rpx 0;
      .title {
        display: flex;
        align-items: center;
        font-size: 30rpx;
        color: #1d1d1d;
        text:nth-child(2) {
          color: #8c8c8c;
        }
      }
      .choose {
        position: relative;
        width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
        background-color: #f6f6f6;
        margin-top: 30rpx;
        margin-right: 16rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        color: #8c8c8c;
        .iconfont {
          font-size: 60rpx;
        }
        image {
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }
        .close {
          position: absolute;
          width: 32rpx;
          height: 32rpx;
          right: -16rpx;
          top: -16rpx;
          background-color: #f0250e;
          color: #fff;
          font-size: 28rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
  .foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    width: 100%;
    padding-top: 20rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom));
    padding-bottom: calc(env(safe-area-inset-bottom));
    border-top: 1px solid #eee;
    .btn {
      width: 678rpx;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      background-color: #f0250e;
      font-size: 32rpx;
      color: #fff;
      font-weight: 500;
      border-radius: 999rpx;
    }
    .tip {
      margin: 20rpx 0;
      font-size: 24rpx;
      color: #8c8c8c;
    }
  }
}
</style>
